Add react-native-sdk package #2745

mfbz · 2025-12-10T19:45:38Z

Added react-native-sdk package, similar to react-sdk but for react-native applications. It fully supports all the same hooks available in react-sdk, plus the connect and profile components. It leverages fcl-react-native for managing blockchain interactions and it's compatible to both react-native and expo applications.

Here's some screenshots:

Description	Image
Splash
Home
Connect
Connected
Profile

Copilot

Pull request overview

This PR introduces a new @onflow/react-native-sdk package that brings Flow blockchain integration to React Native and Expo applications. The package provides the same hooks as react-sdk plus native mobile components (Connect and Profile) for wallet management. Additionally, it includes improvements to the WalletConnect integration in fcl-react-native for better mobile deep linking support and disconnect handling.

Key changes:

New React Native SDK package with hooks, components, and providers
Enhanced WalletConnect service with deep link transformation for mobile wallets
Refactored disconnect logic to properly clean up WalletConnect sessions
Updated demo with mobile starter template promotion

Reviewed changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react-native-sdk/package.json	Package manifest for the new React Native SDK
packages/react-native-sdk/src/index.ts	Main entry point re-exporting hooks, components, and types
packages/react-native-sdk/src/provider/FlowProvider.tsx	Provider component that sets up Flow client and context
packages/react-native-sdk/src/provider/GlobalTransactionProvider.tsx	Provider for tracking global transaction state
packages/react-native-sdk/src/components/Connect.tsx	Wallet connection button with profile modal
packages/react-native-sdk/src/components/Profile.tsx	User profile component displaying balance and wallet info
packages/react-native-sdk/src/icons/*.tsx	Icon components for UI elements
packages/fcl-react-native/src/walletconnect/service.ts	Enhanced deep link transformation for mobile wallets
packages/fcl-react-native/src/walletconnect/client.ts	New disconnect utility function
packages/fcl-react-native/src/fcl-react-native.ts	Refactored unauthenticate to use shared disconnect logic
packages/fcl-react-native/src/client.ts	Updated createFlowClient with disconnect integration
packages/demo/src/components/starter-banner.tsx	Added mobile starter template card

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-15T22:59:29Z

packages/react-native-sdk/src/components/Connect.tsx

+} & (
+  | {vaultIdentifier: string; erc20Address?: never}
+  | {vaultIdentifier?: never; erc20Address: string}
+)


The TokenConfig type doesn't allow both vaultIdentifier and erc20Address to be specified simultaneously, which prevents supporting tokens that exist on both Cadence and EVM. Consider allowing both properties to be optional without mutual exclusion to support cross-VM tokens.

Suggested change

} & (

| {vaultIdentifier: string; erc20Address?: never}

| {vaultIdentifier?: never; erc20Address: string}

)

vaultIdentifier?: string

erc20Address?: string

}

Correct as it is because you must specify one or the other like in react-sdk

Copilot · 2025-12-15T22:59:29Z

packages/fcl-react-native/src/walletconnect/service.ts

+  // Transform uid format (e.g., "frw#authz") to deeplink URL (e.g., "frw://authz")
+  // Service UIDs use # as separator but mobile deeplinks need ://
+  if (uid && uid.includes("#") && !uid.includes("://")) {
+    return uid.replace("#", "://")


The string replacement logic assumes UIDs always have exactly one '#' character. If a UID contains multiple '#' characters, only the first will be replaced, potentially creating an invalid deep link. Consider using a more robust transformation that handles edge cases or validates the UID format.

Suggested change

return uid.replace("#", "://")

const [scheme, ...rest] = uid.split("#");

return scheme + "://" + rest.join("#");

not needed because in case it has multiple "#" it's a wrong uid and it should error

chasefleming · 2025-12-15T23:05:47Z

packages/react-native-sdk/README.md

@@ -0,0 +1,59 @@
+# @onflow/react-native-sdk
+
+A React Native library that provides hooks for interacting with the Flow blockchain. It helps you authenticate users, run Cadence scripts and transactions, listen to events, and manage network configuration directly from your components. Fully compatible with Expo.


Can we add a line here about it being comparable to the React SDK and add a link. We could maybe add a link to the hooks section of the playground as well.

chasefleming · 2025-12-15T23:07:16Z

packages/react-native-sdk/README.md

+</FlowProvider>
+```
+
+## 🪝 Available Hooks


I would put a link to a full list in case it gets out of date. And also put a note like here is a look at some of the hooks available just to account for the list becoming not up to date.

chasefleming · 2025-12-15T23:09:00Z

packages/react-native-sdk/src/components/Connect.tsx

+  | {vaultIdentifier?: never; erc20Address: string}
+)
+
+export interface ConnectProps {


Are these the same as the connect component? Should it be shared? How do we make sure these don't get out of sync. Or maybe it doesn't matter if they do since they are separate components?

Yep for the components i'd keep them separated because they could have different implementations, like in this case where there is a reduced interface.

chasefleming · 2025-12-15T23:10:12Z

packages/react-native-sdk/src/components/Connect.tsx

+  )
+}
+
+const styles = StyleSheet.create({


Is the component themeable like React SDK? I don't think we need to bother with that, but on the docs/playground we should make a note that theming is not available in the React Native SDK.

No, it's not themeable right now for sake of simplicity (i saw we were doing some changes also on react-sdk so i avoided doing that). Yep, i omitted the theme section in the Docs (PR).

chasefleming · 2025-12-15T23:10:49Z

packages/react-native-sdk/src/components/Connect.tsx

+    minHeight: 48,
+  },
+  disconnectedButton: {
+    backgroundColor: "#0F172A",


Can we make a file to share the colors across components? Same with any other styling constants.

Good idea, added!

chasefleming · 2025-12-15T23:11:22Z

packages/react-native-sdk/src/components/Profile.tsx

+    if (!chainId) return []
+
+    const getFlowTokenAddress = () => {
+      if (chainId === "emulator" || chainId === "local")


We should have constants for these

I agree with you that constants would be cleaner, but useFlowChainId return value is a string and probably it's ok and flexible enough with the forking changes we are doing where the chainId can be mainnet-fork, etc

chasefleming · 2025-12-15T23:12:10Z

packages/react-native-sdk/src/components/Profile.tsx

+    const address = getFlowTokenAddress().replace("0x", "")
+    return [
+      {
+        symbol: "FLOW",


Constant for this as well

What should be constant? It's implemented exactly as the Profile component in the react-sdk and it's already getting the address from contracts constants. If it's the name or symbol hopefully it won't ever change 😂

chasefleming · 2025-12-15T23:13:14Z

packages/react-native-sdk/src/components/Profile.tsx

+        : CONTRACT_ADDRESSES.mainnet.FlowToken
+    }
+
+    const address = getFlowTokenAddress().replace("0x", "")


We should use the withPrefix method we have

Yep updated with correct method also on react-sdk profile component for consistency

chasefleming · 2025-12-15T23:14:45Z

packages/react-native-sdk/src/components/Profile.tsx

+
+  const displayAddress = useMemo(() => {
+    if (!user?.addr) return ""
+    return `${user.addr.slice(0, 6)}...${user.addr.slice(-4)}`


Can we move this to a helper? I feel like we must do this often

Yes make sense. I've created a util function "truncateAddress" in react-core and updated usage in both react-sdk and react-native-sdk using it

chasefleming · 2025-12-15T23:15:47Z

packages/react-native-sdk/src/provider/FlowProvider.tsx

+  },
+}
+
+export function FlowProvider({


How similar is this to the provider we already have? Can't be shared?

The providers (react-sdk and react-native-sdk) share interfaces and contexts from react-core (FlowConfig, FlowConfigContext, FlowClientContext, QueryClient setup) but the implementation differs due to platform requirements:

react-sdk: Uses fcl and web-specific ConnectModal

react-native-sdk: Uses fcl-react-native and mobile-specific ConnectModalProvider

The core logic (config context, client creation, query client setup) is identical, the difference is the fcl import and modal provider which are platform specific, so for this their implementation is different.

I think you might be able to just wrap this at a platform-level @mfbz

i.e.

function Foo() { const flowClient = //platform-specific impl return (<> <FlowProvider flowClient={flowClient}> </) }

(or similar)

Yes, the fact was that the FlowProvider for react-native-sdk still needed some platform-specific implementation, like the ConnectModalProvider to show the connect modal and some other minor things that were needed in order to make it have the same usage as the react-sdk provider. For this reason, even if i created a FlowProviderCore wrapper it would have inside only a few things and it would still need a platform specific implementation so i kept them with the same interface but separated.

chasefleming · 2025-12-15T23:16:02Z

packages/react-native-sdk/src/provider/FlowQueryClientProvider.tsx

+import {QueryClient} from "@tanstack/react-query"
+import {FlowQueryClientContext} from "@onflow/react-core"
+
+export function FlowQueryClientProvider({


same question

In this case they are basically the same. I have moved it to react-core so that it's reused for both react-sdk and react-native-sdk, thanks for the catch!

mfbz added 30 commits November 8, 2025 22:36

First correct setup

3cb1fa1

Blocto working!

401a52d

Walletconnect opens Flow wallet!

8d48919

Cleanup walletconnect

b7f2a41

Minor improvements

b15b678

Minor fixes and added more logging

0ce48da

Added more logging and auto-redirect support

ab58f72

Fixed autologout

a733529

Prettier fixes

0e8a75a

Improved implementation without hardcoding services

af86090

Improved service discovery

2deedd1

Added missing exports

4b307c4

Improved implementation with client export like fcl

a826247

Improved connection management

66ca475

Fixed walletconnect connection

2288a16

Simplified walletconnect implementation

60f94ac

Converted logger to normal logs

4f4eae3

Added possibility to add custom wallets

67c59e8

Cleanup

28434e2

Improved folder structure

c535aa1

Improved and added connect modal

1533bf5

Improved modal

3214e84

Improved service modal

83f36df

Walletconnect service improvements

c354a9b

Improved scrolling with multiple wallets

abef692

Improved connect modal ui

65dbf86

Improved ConnectModal

22c8ee6

Merge branch 'master' into mfbz/fcl-react-native

a51e705

Improved modal provider

fa30276

Fixed discovery not working

376ff51

chasefleming requested a review from Copilot December 15, 2025 22:58

Copilot AI reviewed Dec 15, 2025

View reviewed changes

chasefleming reviewed Dec 15, 2025

View reviewed changes

chasefleming requested changes Dec 15, 2025

View reviewed changes

mfbz added 2 commits December 16, 2025 09:38

Improved readme

d5ad541

Added more info to readme

ccc8676

vercel bot deployed to Preview December 16, 2025 08:42 View deployment

Improved design system

5bf5cf2

vercel bot deployed to Preview December 16, 2025 09:04 View deployment

mfbz added 2 commits December 16, 2025 10:25

Used sansPrefix instead of regex

4d54a42

Updated changeset

7a05fd3

vercel bot deployed to Preview December 16, 2025 09:29 View deployment

Added truncateAddress function and usage

ca585a6

vercel bot deployed to Preview December 16, 2025 09:37 View deployment

Refactored FlowQueryClientProvider to react-core

64d7747

vercel bot deployed to Preview December 16, 2025 10:01 View deployment

Refactored also GlobalTransactionProvider to react-core

860465d

mfbz requested a review from chasefleming December 16, 2025 10:08

vercel bot deployed to Preview December 16, 2025 10:10 View deployment

jribbink approved these changes Dec 16, 2025

View reviewed changes

chasefleming approved these changes Dec 16, 2025

View reviewed changes

mfbz merged commit 706e082 into master Dec 16, 2025
8 of 9 checks passed

mfbz deleted the mfbz/react-native-sdk branch December 16, 2025 21:00

github-actions bot mentioned this pull request Dec 16, 2025

Version Packages #2771

Merged

	return uid.replace("#", "://")
	const [scheme, ...rest] = uid.split("#");
	return scheme + "://" + rest.join("#");

		@@ -0,0 +1,59 @@
		# @onflow/react-native-sdk

		A React Native library that provides hooks for interacting with the Flow blockchain. It helps you authenticate users, run Cadence scripts and transactions, listen to events, and manage network configuration directly from your components. Fully compatible with Expo.

Add react-native-sdk package #2745

Add react-native-sdk package #2745

Uh oh!

Conversation

mfbz commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chasefleming Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

mfbz commented Dec 10, 2025 •

edited

Loading

chasefleming Dec 15, 2025 •

edited

Loading